<template>
  <div class="home-page">
    <div class="colL">
      <div class="section">
        <!-- 飙升榜 -->
        <div class="biao-sheng-bang">
          <div class="title">飙升榜</div>
          <div class="tab">
            <div class="item active">营销概念</div>
            <div class="item">单品</div>
            <div class="item">类目</div>
            <div class="item">品牌</div>
          </div>
          <div class="rows">
            <div class="item"># 即食花胶</div>
            <div class="item"># 南方小土豆</div>
            <div class="item"># 鸭屎香</div>
            <div class="item"># 水果薯片</div>
            <div class="item"># 辣味巧克力</div>
          </div>
        </div>

        <!-- 我的常用 -->
        <div class="wo-de-chang-yong">
          <div class="title-bar">
            <div class="title">我的常用</div>
            <div class="btn">自定义</div>
          </div>
          <div class="rows">
            <div class="item">营销策划</div>
            <div class="item">包装设计</div>
            <div class="item">直播文案</div>
            <div class="item">AI配方</div>
          </div>
        </div>
      </div>
      <!-- 销量趋势 -->
      <div class="xiao-liang-qu-shi">
        <div class="title">销量趋势</div>
        <div class="tools">
          <div class="text">类目</div>
          <el-select
            size="small"
            placeholder="食品"
            :style="{ width: '100px' }"
          ></el-select>
          <div class="selected">食品 > 休闲零食</div>
        </div>
        <div class="canvas" id="xlqs"></div>
      </div>

      <!-- 热卖品类占比 -->
      <div class="re-mai-pin-lei">
        <div class="title">热卖品类占比</div>
        <div class="canvas" id="rmpl"></div>
      </div>
    </div>
    <div class="colR">
      <!-- 营销日历 -->
      <div class="ying-xiao-ri-li">
        <div class="title">营销日历</div>
        <div class="tools">
          <el-select
            v-model="query.year"
            size="small"
            placeholder="年"
            :style="{ width: '80px' }"
          >
            <el-option value="2021" label="2021"></el-option>
            <el-option value="2022" label="2022"></el-option>
            <el-option value="2023" label="2023"></el-option>
            <el-option value="2024" label="2024"></el-option>
          </el-select>
          <el-select
            v-model="query.month"
            size="small"
            placeholder="月"
            :style="{ width: '80px', margin: '0 15px 0 10px' }"
          >
            <el-option value="1月" label="1月"></el-option>
            <el-option value="2月" label="2月"></el-option>
            <el-option value="3月" label="3月"></el-option>
            <el-option value="4月" label="4月"></el-option>
            <el-option value="5月" label="5月"></el-option>
            <el-option value="6月" label="6月"></el-option>
            <el-option value="7月" label="7月"></el-option>
            <el-option value="8月" label="8月"></el-option>
            <el-option value="9月" label="9月"></el-option>
            <el-option value="10月" label="10月"></el-option>
            <el-option value="11月" label="11月"></el-option>
            <el-option value="12月" label="12月"></el-option>
          </el-select>
          <div class="text">本月热点日期</div>
        </div>
        <div class="cont">
          <div class="rows">
            <div
              class="item"
              :class="{ active: query.rili === 0 }"
              @click="query.rili = 0"
            >
              <div class="lable">2月4日</div>
              <div class="value">立春</div>
            </div>
            <div
              class="item"
              :class="{ active: query.rili === 1 }"
              @click="query.rili = 1"
            >
              <div class="lable">2月9日</div>
              <div class="value">除夕</div>
            </div>
            <div
              class="item"
              :class="{ active: query.rili === 2 }"
              @click="query.rili = 2"
            >
              <div class="lable">2月10日</div>
              <div class="value">春节</div>
            </div>
            <div
              class="item"
              :class="{ active: query.rili === 3 }"
              @click="query.rili = 3"
            >
              <div class="lable">2月14日</div>
              <div class="value">情人节</div>
            </div>
            <div
              class="item"
              :class="{ active: query.rili === 4 }"
              @click="query.rili = 4"
            >
              <div class="lable">2月24日</div>
              <div class="value">元宵</div>
            </div>
          </div>
          <div class="info">
            <div class="item">
              <div class="label">热点名称：</div>
              {{ ["立春", "除夕", "春节", "情人节", "元宵"][query.rili] }}
            </div>
            <div class="item-box">
              <div class="label">策划文件</div>
              <router-link to="" class="link"
                ><Document class="icon" />泥土之下双旦节项目文件</router-link
              >
            </div>
            <div class="item-box">
              <div class="label">往期资料</div>
              <router-link to="" class="link"
                ><Document class="icon" />2022年泥土之下年货节策划</router-link
              >
              <router-link to="" class="link"
                ><Document class="icon" />2021年泥土之下年货节策划</router-link
              >
            </div>
          </div>
          <div class="zhu-yi-shi-xiang">
            <div class="label">注意事项</div>
            <el-input
              type="textarea"
              :rows="5"
              :style="{ marginTop: '7px', width: '100%' }"
              placeholder="请输入注意事项"
            ></el-input>
          </div>
        </div>
      </div>

      <!-- 销量榜 -->
      <div class="xiao-liang-bang">
        <div class="title">销量榜</div>
        <div class="tab">
          <div class="item active">商品榜</div>
          <div class="item">店铺榜</div>
          <div class="item">品牌榜</div>
        </div>
        <div class="table">
          <div class="thead">
            <div class="th">商品</div>
            <div class="th">均价</div>
            <div class="th">销售额</div>
            <div class="th">销量</div>
          </div>
          <div class="tbody">
            <div class="tr">
              <div class="product">
                <img src="../assets/home/p-1.png" class="image" alt="" />
                <div class="info">
                  <div class="name">
                    【包邮】夏威夷果500g精选奶香坚果炒货送礼奶香干果袋装休闲零食
                  </div>
                </div>
              </div>
              <div class="td">￥15.90</div>
              <div class="td">1000w-2500w</div>
              <div class="td">1000-2500</div>
            </div>
            <div class="tr">
              <div class="product">
                <img src="../assets/home/p-2.png" class="image" alt="" />
                <div class="info">
                  <div class="name">【到手80包】巧克力混合快乐分享零食</div>
                </div>
              </div>
              <div class="td">￥19.90</div>
              <div class="td">750w-1000w</div>
              <div class="td">5000-7500</div>
            </div>
            <div class="tr">
              <div class="product">
                <img src="../assets/home/p-3.png" class="image" alt="" />
                <div class="info">
                  <div class="name">
                    【19.0到手80根】三只松鼠牛乳沙琪玛700g奶香早餐糕点
                  </div>
                </div>
              </div>
              <div class="td">￥19.90</div>
              <div class="td">2.5w-50w</div>
              <div class="td">5000-7500</div>
            </div>
            <div class="tr">
              <div class="product">
                <img src="../assets/home/p-4.png" class="image" alt="" />
                <div class="info">
                  <div class="name">
                    【9.9元1袋500g70颗】爆浆太妃糖巧克力糖果结婚喜糖年货
                  </div>
                </div>
              </div>
              <div class="td">￥9.90</div>
              <div class="td">2.5w-50w</div>
              <div class="td">5000-7500</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 商品潜力类目 -->
      <div class="shang-pin-qian-li">
        <div class="title">商品潜力类目</div>
        <div class="canvas" id="spql"></div>
      </div>
    </div>
    <!-- 行业报告 -->
    <div class="hang-ye-bao-gao">
      <div class="title-bar">
        <div class="title">行业报告</div>
        <router-link to="" class="more">更多</router-link>
      </div>
      <div class="rows">
        <div class="item-box">
          <img src="../assets/home/n-1.png" class="image" alt="" />
          <div class="info">
            <div class="name">【洞见研报】佳沃食品分析师会议</div>
            <div class="time">2023/12/20</div>
          </div>
        </div>
        <div class="item-box">
          <img src="../assets/home/n-2.png" class="image" alt="" />
          <div class="info">
            <div class="name">
              【机构调研】食品饮料-恰恰视频(002557)分析师会议
            </div>
            <div class="time">2023/12/20</div>
          </div>
        </div>
        <div class="item-box">
          <img src="../assets/home/n-3.png" class="image" alt="" />
          <div class="info">
            <div class="name">【洞见研报,研墨AI】烘培行业简报</div>
            <div class="time">2023/12/20</div>
          </div>
        </div>
        <div class="item-box">
          <img src="../assets/home/n-4.png" class="image" alt="" />
          <div class="info">
            <div class="name">2023年11月短视频及直播电商营销月报</div>
            <div class="time">2023/10/25</div>
          </div>
        </div>
        <div class="item-box">
          <img src="../assets/home/n-5.png" class="image" alt="" />
          <div class="info">
            <div class="name">
              【机构调研】食品饮料-海欣食品(002702)分析师会议
            </div>
            <div class="time">2023/12/20</div>
          </div>
        </div>
        <div class="item-box">
          <img src="../assets/home/n-6.png" class="image" alt="" />
          <div class="info">
            <div class="name">2023年双11好物节电商数据报告</div>
            <div class="time">2023/10/12</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 平台政策 -->
    <div class="ping-tai-zheng-ce">
      <div class="title-bar">
        <div class="title">行业政策</div>
        <router-link to="" class="more">更多</router-link>
      </div>
      <div class="rows">
        <router-link to="" class="item">中国食品工业协会团体标准</router-link>
        <router-link to="" class="item"
          >《关于培育传统优势食品产区和地方特色食品产业的指导意见》工信部</router-link
        >
        <router-link to="" class="item"
          >市场监督总局关于发布《肉制品生产许可审查细则》</router-link
        >
        <router-link to="" class="item"
          >2023年1-6月份全国规模以上工业企业利润下降</router-link
        >
        <router-link to="" class="item"
          >《食用农产品市场销售质量安全监督管理办法》</router-link
        >
        <router-link to="" class="item"
          >《食品经营许可和备案管理办法》国家市场监督管理局</router-link
        >
        <router-link to="" class="item"
          >市场监管总局《保健食品新功能及产品技术评价实施细则（试行）》</router-link
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { Document } from "@element-plus/icons-vue";
import { onMounted, reactive } from "vue";

const query = reactive({
  year: "2024年",
  month: "2月",
  rili: 0,
});

function xlqs() {
  var chartDom = document.getElementById("xlqs");
  var myChart = echarts.init(chartDom);
  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["12/04", "12/05", "12/06", "12/07", "12/08", "12/09", "12/10"],
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售额",
        type: "line",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 210],
        areaStyle: {},
      },
      {
        name: "销量",
        type: "line",
        stack: "Total",
        data: [220, 182, 191, 234, 290, 330, 310],
        areaStyle: {},
      },
    ],
  };
  option && myChart.setOption(option);
}

function rmpl() {
  var chartDom = document.getElementById("rmpl");
  var myChart = echarts.init(chartDom);
  var option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "2%",
      right: "3%",
      bottom: "3%",
      top: "2%",
      containLabel: true,
    },
    series: [
      {
        type: "treemap",
        width: "95%",
        height: "100%",
        breadcrumb: {
          show: false,
        },
        roam: false,
        nodeClick: false,
        data: [
          {
            name: "糖果蜜饯",
            value: 28.2,
            label: {
              show: true,
              position: "inside",
              formatter: "糖果蜜饯 {c}%",
            },
          },
          {
            name: "坚果炒货",
            value: 22.3,
            label: {
              show: true,
              position: "inside",
              formatter: "坚果炒货 {c}%",
            },
          },
          {
            name: "香脆零食",
            value: 16.3,
            label: {
              show: true,
              position: "inside",
              formatter: "香脆零食 {c}%",
            },
          },
          {
            name: "肉干肉脯",
            value: 12.5,
            label: {
              show: true,
              position: "inside",
              formatter: "肉干肉脯 {c}%",
            },
          },
          {
            name: "营养零食",
            value: 18.2,
            label: {
              show: true,
              position: "inside",
              formatter: "营养零食 {c}%",
            },
          },
          {
            name: "其他",
            value: 12.5,
            label: {
              show: true,
              position: "inside",
              formatter: "其他 {c}%",
            },
          },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
}

function spql() {
  var chartDom = document.getElementById("spql");
  chartDom.removeAttribute("_echarts_instance_");
  var myChart = echarts.init(chartDom);
  var option = {
    xAxis: {
      scale: true,
      min: 10,
      max: 100,
      name: "销售额",
      nameRotate: "0",
      nameLocation: "end",
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: {
      scale: true,
      max: 240,
      name: "近30天GMV增长率",
      nameRotate: "-90",
      nameLocation: "center",
      nameGap: 10,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    grid: {
      left: 50,
      right: 70,
      bottom: 10,
      top: 0,
      containLabel: true,
    },
    series: [
      {
        type: "scatter",
        data: [
          {
            symbolSize: 20,
            value: [20, 180],
            itemStyle: {
              color: "#fac858",
            },
            label: {
              show: true,
              position: "outside",
              formatter: "营养零食",
            },
          },
          {
            symbolSize: 35,
            value: [35, 90],
            itemStyle: {
              color: "#3ba272",
            },
            label: {
              show: true,
              position: "outside",
              formatter: "肉干肉铺",
            },
          },
          {
            symbolSize: 45,
            value: [45, 55],
            itemStyle: {
              color: "#ee6666",
            },
            label: {
              show: true,
              position: "outside",
              formatter: "香脆零食",
            },
          },
          {
            symbolSize: 65,
            value: [65, 120],
            itemStyle: {
              color: "#91cc75",
            },
            label: {
              show: true,
              position: "outside",
              formatter: "坚果炒货",
            },
          },
          {
            symbolSize: 85,
            value: [85, 90],
            itemStyle: {
              color: "#5470c6",
            },
            label: {
              show: true,
              position: "outside",
              formatter: "糖果蜜饯",
            },
          },
        ],
      },
    ],
  };
  option && myChart.setOption(option);
}

onMounted(() => {
  xlqs();
  rmpl();
  spql();
});
</script>
<style lang="scss" scoped>
.home-page {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  padding: 0 20px;
  flex-wrap: wrap;
  .colL {
    width: calc(50% - 10px);
    .section {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .biao-sheng-bang {
        width: calc(50% - 10px);
        border-radius: 12px;
        height: 310px;
        background-color: #fff;
        overflow: hidden;
        .title {
          height: 24px;
          display: flex;
          align-items: center;
          font-weight: bold;
          padding: 14px 20px;
          font-size: 18px;
        }
        .tab {
          height: 32px;
          display: flex;
          padding: 0 20px;
          .item {
            height: 32px;
            display: flex;
            align-items: center;
            margin-right: 20px;
            cursor: pointer;
            &.active {
              color: #2171fe;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 2px;
                background-color: #2171fe;
              }
            }
          }
        }
        .rows {
          clear: both;
          overflow: hidden;
          padding: 15px 20px;
          .item {
            line-height: 28px;
            text-decoration: underline;
            color: #2171fe;
          }
        }
      }
      .wo-de-chang-yong {
        width: calc(50% - 10px);
        border-radius: 12px;
        height: 310px;
        background-color: #fff;
        overflow: hidden;
        .title-bar {
          height: 24px;
          display: flex;
          align-items: center;
          padding: 14px 20px;
          .title {
            font-weight: bold;
            font-size: 18px;
          }
          .btn {
            color: #2171fe;
            cursor: pointer;
            margin-left: auto;
          }
        }
        .rows {
          padding: 0 12px;
          display: flex;
          flex-wrap: wrap;
          .item {
            width: calc(100% / 3);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            &::before {
              content: "";
              width: 48px;
              height: 48px;
              margin-bottom: 10px;
              background-repeat: no-repeat;
              background-size: 48px;
            }
            &:nth-child(1)::before {
              background-image: url("../assets/home/icon-1.png");
            }
            &:nth-child(2)::before {
              background-image: url("../assets/home/icon-2.png");
            }
            &:nth-child(3)::before {
              background-image: url("../assets/home/icon-3.png");
            }
            &:nth-child(4)::before {
              background-image: url("../assets/home/icon-5.png");
            }
          }
        }
      }
    }
    .xiao-liang-qu-shi {
      border-radius: 12px;
      margin-top: 20px;
      height: 406px;
      background-color: #fff;
      overflow: hidden;
      .title {
        height: 24px;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 14px 20px;
        font-size: 18px;
      }
      .tools {
        display: flex;
        align-items: center;
        padding: 0 20px;
        height: 40px;
        .text {
          margin-right: 10px;
        }
        .selected {
          height: 24px;
          display: flex;
          align-items: center;
          background-color: #2171fe;
          color: #fff;
          font-size: 12px;
          border-radius: 3px;
          padding: 0 10px;
          margin-left: 20px;
        }
      }
      .canvas {
        height: 280px;
        margin-top: 12px;
      }
    }
    .re-mai-pin-lei {
      border-radius: 12px;
      margin-top: 20px;
      height: 370px;
      background-color: #fff;
      overflow: hidden;
      .title {
        height: 24px;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 14px 20px;
        font-size: 18px;
      }
      .canvas {
        height: 280px;
        margin-top: 12px;
      }
    }
  }
  .colR {
    width: calc(50% - 10px);
    margin-left: auto;
    .ying-xiao-ri-li {
      border-radius: 12px;
      margin-top: 20px;
      background-color: #fff;
      height: 310px;
      overflow: hidden;
      .title {
        height: 24px;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 14px 20px;
        font-size: 18px;
      }
      .tools {
        display: flex;
        align-items: center;
        padding: 0 20px;
      }
      .cont {
        display: flex;
        padding: 15px 20px 0;
        .rows {
          width: 146px;
          padding: 0 12px;
          background-color: #f5f5f5;
          border-radius: 5px;
          overflow: hidden;
          .item {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: solid 1px #ddd;
            cursor: pointer;
            &:last-child {
              border-bottom-width: 0;
            }
            &.active {
              color: #2171fe;
              font-weight: bold;
            }
          }
        }
        .info {
          width: 240px;
          margin-left: 15px;
          .item {
            height: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
            .label {
              color: #666;
              font-weight: normal;
            }
          }
          .item-box {
            margin-top: 5px;
            .label {
              color: #666;
              line-height: 24px;
            }
            .link {
              height: 24px;
              display: flex;
              align-items: center;
              color: #2171fe;
              text-decoration: underline;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 5px;
              }
            }
          }
        }
        .zhu-yi-shi-xiang {
          flex: 1;
          width: 1%;
          .label {
            padding-bottom: 8px;
          }
        }
      }
    }
    .xiao-liang-bang {
      border-radius: 12px;
      margin-top: 20px;
      height: 406px;
      overflow: hidden;
      background-color: #fff;
      .title {
        height: 24px;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 14px 20px;
        font-size: 18px;
      }
      .tab {
        height: 32px;
        display: flex;
        padding: 0 20px;
        .item {
          height: 32px;
          display: flex;
          align-items: center;
          margin-right: 20px;
          cursor: pointer;
          &.active {
            color: #2171fe;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              height: 2px;
              background-color: #2171fe;
            }
          }
        }
      }
      .table {
        clear: both;
        overflow: hidden;
        padding: 12px 20px;
        .thead {
          height: 28px;
          display: flex;
          background-color: #f5f5f5;
          .th {
            height: 28px;
            display: flex;
            align-items: center;
            text-indent: 12px;
            font-size: 12px;
            color: #999;
            &:nth-child(1) {
              flex: 1;
              width: 1%;
            }
            &:nth-child(2) {
              width: 150px;
              justify-content: center;
            }
            &:nth-child(3) {
              width: 150px;
              justify-content: center;
            }
            &:nth-child(4) {
              width: 150px;
              justify-content: center;
            }
          }
        }
        .tbody {
          clear: both;
          overflow: hidden;
          .tr {
            display: flex;
            padding: 10px 0;
            .product {
              width: 1%;
              flex: 1;
              display: flex;
              align-items: center;
              .image {
                width: 48px;
                height: 48px;
                border-radius: 5px;
                margin-left: 5px;
              }
              .info {
                flex: 1;
                width: 1%;
                margin-left: 10px;
                .name {
                  line-height: 24px;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
              }
            }
            .td {
              display: flex;
              align-items: center;
              justify-content: center;
              &:nth-child(2) {
                width: 150px;
                justify-content: center;
                color: red;
              }
              &:nth-child(3) {
                width: 150px;
                justify-content: center;
              }
              &:nth-child(4) {
                width: 150px;
                justify-content: center;
              }
            }
          }
        }
      }
    }
    .shang-pin-qian-li {
      border-radius: 12px;
      margin-top: 20px;
      height: 370px;
      overflow: hidden;
      background-color: #fff;
      .title {
        height: 24px;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding: 14px 20px;
        font-size: 18px;
      }
      .canvas {
        height: 280px;
        margin-top: 20px;
      }
    }
  }
  .hang-ye-bao-gao {
    width: 1%;
    flex: 1;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    background-color: #fff;
    .title-bar {
      height: 24px;
      display: flex;
      align-items: center;
      padding: 14px 20px 8px;
      .title {
        font-weight: bold;
        font-size: 18px;
      }
      .more {
        color: #2171fe;
        margin-left: auto;
      }
    }
    .rows {
      display: flex;
      flex-wrap: wrap;
      padding: 0 20px 10px;
      .item-box {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 10px 0;
        .image {
          width: 120px;
          height: 54px;
          cursor: pointer;
        }
        .info {
          flex: 1;
          width: 1%;
          margin-left: 12px;
          .name {
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .time {
            line-height: 24px;
            color: #999;
          }
        }
        &:nth-child(odd) {
          .info {
            margin-right: 30px;
          }
        }
      }
    }
  }
  .ping-tai-zheng-ce {
    width: 480px;
    border-radius: 12px;
    margin-top: 20px;
    height: 296px;
    margin-bottom: 20px;
    background-color: #fff;
    overflow: hidden;
    .title-bar {
      height: 24px;
      display: flex;
      align-items: center;
      padding: 14px 20px;
      .title {
        font-weight: bold;
        font-size: 18px;
      }
      .more {
        color: #2171fe;
        margin-left: auto;
      }
    }
    .rows {
      padding: 0 20px 8px;
      .item {
        display: flex;
        align-items: center;
        height: 32px;
        color: #000;
      }
    }
  }
}
</style>
